<!DOCTYPE html> <!-- 声明为HTML5 -->
<!-- 元素参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element -->
<html>
  <head>   
    <meta charset="utf-8" />
    <title>首页</title>
    <link href="main.css" rel="stylesheet"/>
    <link href="top.css" rel="stylesheet"/>
    <link href="left.css" rel="stylesheet"/>
    <link href="right.css" rel="stylesheet"/>
    <link href="panel.css" rel="stylesheet"/>
    <link href="grid.css" rel="stylesheet"/>
    <link href="chart.css" rel="stylesheet"/>
    <link href="map.css" rel="stylesheet"/>
    
    <script src="https://webapi.amap.com/maps?v=2.0&key=756f6e41e22bb034162c0b6b01e2ed3f"></script>
    <script src="script.js"></script>
  </head>
  <body onload="load()">
    <div class="top">
      <div class="title">
        <img class="logo" src="assets\images\33.jpg" alt="logo">
        <div class="title-cn">
          智慧环保运行监控大屏
        </div>
        <div class="title-en">
          Environmental Monitoring Data Center
        </div>
      </div>
      <div class="space"></div>
      <div class="date">
        2022年06月8日 星期三
      </div>
    </div>
    <div class="left">
      <div class="panel">
        <div class="panel-heading">
          <div class="panel-heading-title">总体运行概况</div>
        </div>
        <div class="panel-body">
          <div class="grid">
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image" src="assets\11.png">
              </div>
              <div class="grid-item-label">A排放点(处)</div>
              <div class="grid-item-value">16</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image" src="assets\11.png">
              </div>
              <div class="grid-item-label">工单(处理中)</div>
              <div class="grid-item-value">10</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image" src="assets\11.png">
              </div>
              <div class="grid-item-label">W排放点(处)</div>
              <div class="grid-item-value">8</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image" src="assets\11.png">
              </div>
              <div class="grid-item-label">工单(未处理)</div>
              <div class="grid-item-value">6</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image" src="assets\11.png">
              </div>
              <div class="grid-item-label">W产生点(处)</div>
              <div class="grid-item-value">12</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image" src="assets\11.png">
              </div>
              <div class="grid-item-label">风险(整改中)</div>
              <div class="grid-item-value">3</div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-heading">
          <div class="panel-heading-title">排放数据统计</div>
        </div>
        <div class="panel-body">
          <div class="grid">
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image-large" src="assets\images\22.png">
              </div>
              <div class="grid-item-name">P1年排放量(吨)</div>
              <div class="grid-item-value">32</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image-large" src="assets\images\22.png">
              </div>
              <div class="grid-item-name">P2年排放量(吨)</div>
              <div class="grid-item-value">26</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image-large" src="assets\images\22.png">
              </div>
              <div class="grid-item-name">P3年排放量(吨)</div>
              <div class="grid-item-value">58</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image-large" src="assets\images\22.png">
              </div>
              <div class="grid-item-label">P4年排放量(吨)</div>
              <div class="grid-item-value">36</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image-large" src="assets\images\22.png">
              </div>
              <div class="grid-item-label">P7年排放量(吨)</div>
              <div class="grid-item-value">36</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image-large" src="assets\images\22.png">
              </div>
              <div class="grid-item-label">P8年排放量(吨)</div>
              <div class="grid-item-value">24</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image-large" src="assets\images\22.png">
              </div>
              <div class="grid-item-label">P5年产生量(吨)</div>
              <div class="grid-item-value">125</div>
            </div>
            <div class="grid-item">
              <div class="grid-item-icon">
                <img class="grid-item-image-large" src="assets\images\22.png">
              </div>
              <div class="grid-item-label">P6年排放量(吨)</div>
              <div class="grid-item-value">64</div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-heading">
          <div class="panel-heading-title">废水来源占比</div>
        </div>
        <div class="panel-body">
          <div id="pie-chart"></div>
        </div>
      </div>
    </div>
    <div class="center">
      <div id="map">小组成员：颜莹洁 黄慧瑕 罗思莹 马小涵</div>
    </div>
    <div class="right">
      <div class="panel">
        <div class="panel-heading">
          <div class="panel-heading-title">废气排放统计</div>
        </div>
        <div class="panel-body">
          <div id="line-chart"></div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-heading">
          <div class="panel-heading-title">危废排放统计</div>
        </div>
        <div class="panel-body">
          <div id="bar-chart"></div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-heading">
          <div class="panel-heading-title">在线视频监控</div>
        </div>
        <div class="panel-body">
          <iframe style="width: 100%; height: 100%;" src="https://player.bilibili.com/player.html?aid=712726917&bvid=BV1ND4y1R745&cid=253932268&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
        </div>
      </div>
    </div>
  </body>
</html>